<template>
  <div style="height: 100%" id="echarts" ref="echart">
    echart
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ECharts",
  props: {
    option: {
      type: Object
    }
  },
  watch: {
    option: {
      handler: function() {
        this.setOption();
      },
      deep: true
    }
  },
  data() {
    return {
      echart: null
    };
  },
  methods: {
    initChart() {
      if (!this.echart) {
        this.echart = echarts.init(this.$refs.echart);
      }
      this.echart.showLoading();
    },
    setOption() {
      this.echart.setOption(this.option);
      this.echart.hideLoading();
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>

<style scoped></style>
